<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

        <!-- 生产环境千万不要使用它 -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

        <style>
            .red {
                color: red;
            }

            .container {
                background: gold;
                padding: 10px;
                border-radius: 4px;
            }
        </style>
    </head>

    <body>
        <div id="root"></div>

        <script type="text/babel">
            function MyButton() {
                const [count, setCount] = React.useState(0);
                function handleClick() {
                    setCount(count + 1);
                }
                return (
                    <button
                        className={count > 5 ? 'red' : ''}
                        onClick={handleClick}
                    >
                        click me {count} times
                    </button>
                );
            }

            function Container({ children }) {
                return <div className="container">{children}</div>;
            }

            function MyApp() {
                return (
                    <Container>
                        <MyButton />
                        <MyButton />
                    </Container>
                );
            }

            ReactDOM.render(<MyApp />, document.getElementById('root'));
        </script>
    </body>
</html>
